﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="video.css" />
    <style>
        html {
            height: 100%;
        }

        /*
			PLAYER
		*/

        .audioplayer {
            height: 2.5em; /* 40 */
            color: #8c8c8c;
            /*text-shadow: 1px 1px 0 #000;
            border: 1px solid #222;*/
            position: relative;
            z-index: 1;
            /*background: #333;*/
        }


        /* mini mode (fallback) */

        .audioplayer-mini {
            width: 2.5em; /* 40 */
            margin: 0 auto;
        }


        /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

        .audioplayer > div {
            position: absolute;
        }

        .audioplayer-title {
            margin-left: 3em;
        }

        /* play/pause button */

        .audioplayer-playpause {
            width: 2.5em; /* 40 */
            height: 100%;
            text-align: left;
            text-indent: -9999px;
            cursor: pointer;
            z-index: 2;
            top: 0;
            left: 0;
        }

        .audioplayer:not(.audioplayer-mini) .audioplayer-playpause {
            border-right: 1px solid #555;
            border-right-color: rgba( 255, 255, 255, .1 );
        }

        .audioplayer-mini .audioplayer-playpause {
            width: 100%;
        }

        .audioplayer-playpause a {
            display: block;
        }

        .audioplayer-stopped .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
        }

        .audioplayer-playing .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
        }

        
        .audioplayer-stopped .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
        }

        .audioplayer-playing .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
            -webkit-animation: audio_playing 1s infinite;
        }


        @-webkit-keyframes audio_playing {
            30% {
                background-image: url(images/icon_audio_reading_126f1f1.png);
            }

            31% {
                background-image: url(images/icon_audio_reading_226f1f1.png);
            }

            61% {
                background-image: url(images/icon_audio_reading_226f1f1.png);
            }

            62% {
                background-image: url(images/icon_audio_reading_326f1f1.png);
            }

            100% {
                background-image: url(images/icon_audio_reading_326f1f1.png);
            }
        }

            /*.audioplayer-playing .audioplayer-playpause a:before,
            .audioplayer-playing .audioplayer-playpause a:after {
                width: 40%;
                height: 100%;
                background-color: #8c8c8c;
                content: '';
                position: absolute;
                top: 0;
            }*/

            .audioplayer-playing .audioplayer-playpause a:before {
                left: 0;
            }

            .audioplayer-playing .audioplayer-playpause a:after {
                right: 0;
            }


        /* timers */

        .audioplayer-time {
            width: 4.375em; /* 70 */
            height: 100%;
            line-height: 2.375em; /* 38 */
            text-align: center;
            z-index: 2;
            top: 0;
        }

        .audioplayer-time-current {
            /*border-left: 1px solid #111;
            border-left-color: rgba( 0, 0, 0, .25 );*/
            left: 1em; /* 40 */
        }

        .audioplayer-time-duration {
            border-right: 1px solid #555;
            border-right-color: rgba( 255, 255, 255, .1 );
            right: 0.5em; /* 40 */
            margin-top: 1.5em;
        }

        .audioplayer-novolume .audioplayer-time-duration {
            border-right: 0;
            right: 0;
        }


        /* progress bar of loaded/played */

        .audioplayer-bar {
            height: 0.2em; /* 14 */
            background-color: #222;
            cursor: pointer;
            z-index: 1;
            top: 50%;
            right: 5em; /* 110 */
            left: 3em; /* 110 */
            margin-top: 1.6em; /* 7 */
        }

        .audioplayer-novolume .audioplayer-bar {
            right: 4.375em; /* 70 */
        }

        .audioplayer-bar div {
            width: 0;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .audioplayer-bar-loaded {
            background-color: #333;
            z-index: 1;
        }

        .audioplayer-bar-played {
            background: #007fd1;
            z-index: 2;
        }


        /* volume button */

        .audioplayer-volume {
            width: 2.5em; /* 40 */
            height: 100%;
            border-left: 1px solid #111;
            border-left-color: rgba( 0, 0, 0, .25 );
            text-align: left;
            text-indent: -9999px;
            cursor: pointer;
            z-index: 2;
            top: 0;
            right: 0;
        }

            .audioplayer-volume:hover,
            .audioplayer-volume:focus {
                background-color: #222;
            }

        .audioplayer-volume-button {
            width: 100%;
            height: 100%;
        }

            .audioplayer-volume-button a {
                width: 0.313em; /* 5 */
                height: 0.375em; /* 6 */
                background-color: #8c8c8c;
                display: block;
                position: relative;
                z-index: 1;
                top: 40%;
                left: 35%;
            }

                .audioplayer-volume-button a:before,
                .audioplayer-volume-button a:after {
                    content: '';
                    position: absolute;
                }

                .audioplayer-volume-button a:before {
                    width: 0;
                    height: 0;
                    border: 0.5em solid transparent; /* 8 */
                    border-left: none;
                    border-right-color: #8c8c8c;
                    z-index: 2;
                    top: 50%;
                    right: -0.25em;
                    margin-top: -0.5em; /* 8 */
                }

        .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after {
            /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
            width: 0.313em; /* 5 */
            height: 0.313em; /* 5 */
            border: 0.25em double #fff; /* 4 */
            border-width: 0.25em 0.25em 0 0; /* 4 */
            left: 0.563em; /* 9 */
            top: -0.063em; /* 1 */
            -webkit-border-radius: 0 0.938em 0 0; /* 15 */
            -moz-border-radius: 0 0.938em 0 0; /* 15 */
            border-radius: 0 0.938em 0 0; /* 15 */
            -webkit-transform: rotate( 45deg );
            -moz-transform: rotate( 45deg );
            -ms-transform: rotate( 45deg );
            -o-transform: rotate( 45deg );
            transform: rotate( 45deg );
        }


        /* volume dropdown */

        .audioplayer-volume-adjust {
            height: 6.25em; /* 100 */
            cursor: default;
            position: absolute;
            left: 0;
            right: -1px;
            top: -9999px;
            background: #333;
        }

        .audioplayer-volume:not(:hover) .audioplayer-volume-adjust {
            opacity: 0;
        }

        .audioplayer-volume:hover .audioplayer-volume-adjust {
            top: auto;
            bottom: 100%;
        }

        .audioplayer-volume-adjust > div {
            width: 40%;
            height: 80%;
            background-color: #222;
            cursor: pointer;
            position: relative;
            margin: 30% auto 0;
        }

        .audioplayer-volume-adjust div div {
            width: 100%;
            height: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #007fd1;
        }

        .audioplayer-novolume .audioplayer-volume {
            display: none;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="videoTab">
            <div id="tabHeads" class="tabhead">
                <span tabsrc="video" data-content-id="video">
                    <var id="lang_tab_insertV"></var>
                </span>
                <span tabsrc="upload" class="focus" data-content-id="upload">
                    <var id="lang_tab_uploadV"></var>
                </span>
            </div>
            <div id="tabBodys" class="tabbody">
                <div id="video" class="panel">
                    <table>
                        <tr>
                            <td>
                                <label for="videoUrl" class="url">
                                    <var id="lang_video_url"></var>
                                </label>
                            </td>
                            <td>
                                <input id="videoUrl" type="text"></td>
                        </tr>
                    </table>
                    <div id="preview"></div>
                    <div id="videoInfo">
                        <fieldset>
                            <legend>
                                <var id="lang_video_size"></var>
                            </legend>
                            <table>
                                <tr>
                                    <td>
                                        <label for="videoWidth">
                                            <var id="lang_videoW"></var>
                                        </label>
                                    </td>
                                    <td>
                                        <input class="txt" id="videoWidth" type="text" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label for="videoHeight">
                                            <var id="lang_videoH"></var>
                                        </label>
                                    </td>
                                    <td>
                                        <input class="txt" id="videoHeight" type="text" /></td>
                                </tr>
                            </table>
                        </fieldset>
                        <fieldset>
                            <legend>
                                <var id="lang_alignment"></var>
                            </legend>
                            <div id="videoFloat"></div>
                        </fieldset>
                    </div>
                </div>
                <div id="upload" class="panel focus">
                    <div id="upload_left">
                        <div id="queueList" class="queueList">
                            <div class="statusBar element-invisible">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePickerBtn"></div>
                                    <div class="uploadBtn">
                                        <var id="lang_start_upload"></var>
                                    </div>
                                </div>
                            </div>
                            <div id="dndArea" class="placeholder">
                                <div class="filePickerContainer">
                                    <div id="filePickerReady"></div>
                                </div>
                            </div>
                            <ul class="filelist element-invisible">
                                <li id="filePickerBlock" class="filePickerBlock"></li>
                            </ul>
                        </div>
                    </div>
                    <div id="uploadVideoInfo">
                        <fieldset>
                            <legend>
                                <var id="lang_upload_size"></var>
                            </legend>
                            <table>
                                <tr>
                                    <td>
                                        <label>
                                            <var id="lang_upload_width"></var>
                                        </label>
                                    </td>
                                    <td>
                                        <input class="txt" id="upload_width" type="text" /></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>
                                            <var id="lang_upload_height"></var>
                                        </label>
                                    </td>
                                    <td>
                                        <input class="txt" id="upload_height" type="text" /></td>
                                </tr>
                            </table>
                        </fieldset>
                        <fieldset>
                            <legend>
                                <var id="lang_upload_alignment"></var>
                            </legend>
                            <div id="upload_alignment"></div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="playAutdio" style="border: 1px solid #ebebeb; background-color: #fcfcfc; overflow: hidden; padding: 12px 0;">
        <div style="display: block;">
            <audio src="http://edoctorcorp.med9200.com/upload/media/talk.mp3" preload="auto"></audio>
        </div>
    </div>
    <!-- jquery -->
    <script type="text/javascript" src="../../third-party/jquery-1.10.2.min.js"></script>

    <!-- webuploader -->
    <script type="text/javascript" src="../../third-party/webuploader/webuploader.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">

    <!-- video -->
    <script type="text/javascript" src="video.js"></script>
    <script type="text/javascript" charset="gb2312" src="audioplayer.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.playAutdio').find('audio').audioPlayer({
                classPrefix: 'audioplayer',
                strPlay: 'Play',
                strPause: 'Pause',
            });

            $('.playAutdio').bind('click', function () {
                if ($('.audioplayer-playing').length > 0) {
                    $('.icon_audio_default').show();
                    $('.icon_audio_playing').hide();
                    $('.audioplayer-playpause a').trigger('click');
                }
                else if ($('.audioplayer-stopped').length > 0) {
                    $('.icon_audio_playing').show();
                    $('.icon_audio_default').hide();
                    $('.audioplayer-playpause a').trigger('click');
                } else {
                    //当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放
                }
            });
        })
    </script>
</body>
</html>
